<template>
  <div class="com-chart" ref="charts_ref"></div>
</template>

<script>
import chinaJson from "@/assets/map/china.json";
export default {
  data() {
    return {
      chinaMap: {},
    };
  },
  props: {
    regionTotal: {
      type: Array,
    },
  },
  mounted() {
    this.initChart();
    window.addEventListener("resize", this.screenAdpter);
    this.screenAdpter();
  },
  destroyed() {
    //防止内存泄露
    window.removeEventListener("resize", this.screenAdpter);
  },
  watch: {
    regionTotal() {
      this.getData();
    },
  },
  methods: {
    // 初始化echarts
    initChart() {
      this.chartInstance = this.$echarts.init(this.$refs.charts_ref);
      this.chinaMap = chinaJson;
      this.$echarts.registerMap("chian", this.chinaMap);
      //初始化的option
      const initOption = {
        geo: {
          type: "map",
          map: "chian",
          top: "5%",
        },
        visualMap: [
          {
            type: "piecewise",
            splitNumber: 7,
            pieces: [
              { lt: 0, label: "0人", color: "#E2EBF4" },
              { gt: 1, lte: 9, label: "1-9人", color: "#FFE7B2" },
              { gt: 10, lte: 99, label: "10-99人", color: "#FFCEA0" },
              { gt: 100, lte: 499, label: "100-499人", color: "#FFA577" },
              { gt: 500, lte: 999, label: "500-999人", color: "#FF6341" },
              { gt: 1000, lte: 9999, label: "1000-9999人", color: "#FF2736" },
              { gt: 10000, label: "10000人及以上", color: "#DE1F05" },
            ],
            bottom: "15%",
            textStyle: {
              color: "#fff",
            },
          },
        ],
      };
      this.chartInstance.setOption(initOption);
    },
    //获取服务器数据的方法
    // https://view.inews.qq.com/g2/getOnsInfo?name=disease_h5
    getData() {
      this.updataChart();
    },
    updataChart() {
      //处理数据的option
      const dataOption = {
        geo: {
          regions: this.regionTotal,
        },
      };
      this.chartInstance.setOption(dataOption);
    },
    screenAdpter() {
      //监听窗口大小设置的option
      const AdapterOption = {};
      this.chartInstance.setOption(AdapterOption);
      this.chartInstance.resize();
    },
  },
};
</script>

<style>
</style>